<template>
  <div class="record">
    <div class="search_view">
      <img :src="search_icon" alt class="search_icon" @click="getlist()">
      <input @blur="inputBack()" type="text" v-model="ordersn" @input="getlist()" class="input" placeholder="搜索订单号">
    </div>
    <div class="filter_view">
      <div class="left" @click="select_station(true , 'reserve')">
        <i class="iconfont icon-dizhi address_icon"></i>
        <span class="text" v-if="title.length==0">筛选充电桩</span>
        <span class="text" v-if="title.length>0">{{title}}</span>
        <i class="iconfont icon-xiangxia arrow_icon"></i>
      </div>
      <div class="right">
        <yd-datetime v-model="currentdate" type="date"></yd-datetime>
        <i class="iconfont icon-xiangxia arrow_icon"></i>
      </div>
    </div>
    <div class="list_view" v-show="!stationsListShow" ref="warpper">
      <div>
        <div class="list" v-for="(item,index) in list" :key="index">
          <div class="top">
            <div class="order_num">订单号：{{item.ordersn}}</div>
            <div class="money">￥{{item.price}}</div>
          </div>
          <div class="time">{{item.starttime}}</div>
          <div class="bottom">
            <div class="left">
              <i class="iconfont icon-chatouhao chatouhao"></i>
              <span class="number">{{item.s_code}}号</span>
              <span class="chatou">插头</span>
              <span class="station">{{item.title}}</span>
            </div>
            <div class="right">
              <span class="charging">已充</span>
              <span class="charging_time">{{item.chargetime}}小时</span>
            </div>
          </div>
        </div>
      </div>
      <div class="nothing-contant" v-if="list.length<=0">
        <img :src="nothing" alt>
        <div class="text">查询不到任何站点</div>
      </div>
    </div>
    <div class="stations_list" v-show="stationsListShow" ref="warpper1">
      <div>
        <div
          class="list"
          @click="select(item.title)"
          v-for="(item,index) in selectList"
          :key="index"
        >
          <div class="station_view">
            <i class="iconfont icon-dizhi address_icon"></i>
            <span>{{item.title}}</span>
          </div>
          <div class="address">{{item.address}}</div>
        </div>
      </div>
      <div class="nothing-contant" v-if="selectList.length<=0">
        <img :src="nothing" alt>
        <div class="text">没有充电桩可以筛选</div>
      </div>
    </div>
  </div>
</template>
   
<style lang="less" scoped>
@import "index.less";
</style>

<script>
import BScroll from "better-scroll";

export default {
  name: "record",
  data() {
    return {
      search_icon: require("../../../assets/images/search_icon.png"),
      nothing: require("../../../assets/nothing.png"),
      stationsListShow: false,
      // 请求参数
      currentdate: "",
      page: 1,
      selectPage: 1,
      title: "",
      ordersn: "", // 输入的订单号
      // 后台
      list: {},
      selectList: {},
      scroll: {},
      lock: false
    };
  },
  created() {
    var date = new Date();
    var seperator1 = "-";
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
      month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
    }
    this.currentdate = year + seperator1 + month + seperator1 + strDate;
    // 获取参数
    this.getlist();
  },
  methods: {
    cb() {
      console.log(123);
      this.stationsListShow = false;
      // this.getlist();
    },
    select_station(flag, reserver) {
      if (reserver) {
        this.stationsListShow = !this.stationsListShow;
      } else {
        this.stationsListShow = flag;
      }

      if (this.stationsListShow) {
        this.getSelectList();
      } else {
        this.getlist();
      }
    },
    getlist() {
      this.page = 1;
      this.$dialog.loading.open("正在加载");
      this.$http
        .get("/order/Adminlist", {
          params: {
            page: this.page,
            title: this.title,
            ordersn: this.ordersn,
            time: this.currentdate
          }
        })
        .then(res => {
          this.list = res.data.data;
          this.scrollInit();
          this.$dialog.loading.close();
        });
    },
    select(title) {
      this.title = title;
      this.select_station(false);
    },
    scrollInit() {
      this.scroll = {};
      this.scroll = new BScroll(this.$refs.warpper, {
        click: true,
        pullUpLoad: {
          threshold: -50
        }
      });
      this.scroll.on("pullingUp", () => {
        if (this.lock) {
          return;
        }
        // 页数加一
        this.page++;
        // 锁定防止多次加载
        this.lock = true;
        this.$dialog.loading.open("正在加载");
        this.$http
          .get("/device/Adminlist", {
            params: {
              page: this.page,
              title: this.title,
              time: this.currentdate,
              ordersn: this.ordersn
            }
          })
          .then(res => {
            if (res.data.data.length <= 0) {
              this.$dialog.toast({
                mes: "没有更多的数据",
                timeout: 1500,
                icon: "none"
              });
              this.lock = true;
            } else {
              // 解锁上拉
              this.lock = false;
            }
            this.list = this.list.concat(res.data.data);
            this.$forceUpdate();
            this.scroll.finishPullUp();
            this.scroll.refresh();
            this.$dialog.loading.close();
          });
      });
    },
    selectScrollInit() {
      this.scroll = {};
      this.scroll = new BScroll(this.$refs.warpper1, {
        click: true,
        pullUpLoad: {
          threshold: -50
        }
      });
      this.scroll.on("pullingUp", () => {
        if (this.lock) {
          return;
        }
        // 页数加一
        this.selectPage++;
        // 锁定防止多次加载
        this.lock = true;
        this.$dialog.loading.open("正在加载");
        this.$http
          .get("/device/Adminlist", {
            params: {
              page: this.selectPage
            }
          })
          .then(res => {
            this.lock = false;
            this.selectList = this.selectList.concat(res.data.data);
            this.$forceUpdate();
            this.scroll.finishPullUp();
            this.scroll.refresh();
            this.$dialog.loading.close();
          });
      });
    },
    getSelectList() {
      this.selectPage = 1;
      this.$dialog.loading.open("正在加载");
      this.$http
        .get("/device/Adminlist", {
          params: {
            page: this.selectPage
          }
        })
        .then(res => {
          this.selectList = res.data.data;
          this.selectScrollInit();
          this.$dialog.loading.close();
        });
    }
  },
  components: {}
};
</script>
